<template>
  <view class="recharge-container">
    <!-- 已删除：当前余额展示模块 -->

    <view class="amount-options">
      <view
        class="amount-item"
        v-for="(amount, index) in defaultAmounts"
        :key="index"
        :class="{ selected: selectedAmount === amount }"
        @click="selectedAmount = amount; customAmount = ''"
      >
        <text>¥{{ amount }}</text>
      </view>
    </view>

    <view class="custom-amount">
      <text>自定义金额</text>
      <input
        type="number"
        v-model="customAmount"
        placeholder="输入金额（最多2位小数）"
        @input="handleCustomInput"
      />
    </view>

    <button class="recharge-btn" @click="confirmRecharge">确认充值</button>

    <!-- 关键删除：移除充值记录整个模块 -->
    <!-- 原recharge-record模块已删除 -->

    <!-- 支付宝表单容器（仅H5端显示，小程序端隐藏） -->
    <view id="alipayForm" v-if="showPayForm" class="alipay-form-container"></view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

// 模拟从本地缓存获取用户信息（实际项目中从登录态/Token解析）
const getUserInfo = () => {
  const userInfo = uni.getStorageSync('userInfo');
  return userInfo || { userId: 1 }; // 沙箱测试默认用户ID，实际替换为真实用户ID
};

// 状态管理：删除balance变量（无需保留），删除充值记录相关变量
const defaultAmounts = [50, 100, 200, 500, 1000];
const selectedAmount = ref(100);
const customAmount = ref('');
const showPayForm = ref(false);
const userInfo = ref(getUserInfo());

// 已删除：充值记录模拟数据（rechargeRecords变量）

// 处理自定义金额输入：限制2位小数、过滤非数字
const handleCustomInput = (e) => {
  let value = e.detail.value || '';
  // 过滤非数字和多余的小数点
  value = value.replace(/[^\d.]/g, '');
  // 限制只能有一个小数点
  if (value.indexOf('.') !== value.lastIndexOf('.')) {
    value = value.substring(0, value.lastIndexOf('.'));
  }
  // 限制小数点后最多2位
  if (value.includes('.')) {
    const decimalPart = value.split('.')[1];
    if (decimalPart.length > 2) {
      value = value.substring(0, value.indexOf('.') + 3);
    }
  }
  customAmount.value = value;
  // 更新选中金额（空值则置0）
  selectedAmount.value = value ? Number(value) : 0;
};

// 确认充值（对接支付宝沙箱）
const confirmRecharge = async () => {
  // 金额验证
  if (selectedAmount.value <= 0 || isNaN(selectedAmount.value)) {
    uni.showToast({ title: '请选择或输入有效金额', icon: 'none' });
    return;
  }
  // 金额上限验证
  if (selectedAmount.value > 10000) {
    uni.showToast({ title: '单次充值金额不能超过10000元', icon: 'none' });
    return;
  }
  // 用户ID验证
  if (!userInfo.value.userId) {
    uni.showToast({ title: '请先登录', icon: 'none' });
    uni.navigateTo({ url: '/pages/login/login' });
    return;
  }

  uni.showModal({
    title: '充值确认',
    content: `您确定要充值 ¥${selectedAmount.value.toFixed(2)} 吗？`,
    success: async (modalRes) => {
      if (modalRes.confirm) {
        try {
          uni.showLoading({ title: '跳转支付中...' });
          
          // 修正：UniApp 的 request 异步写法（兼容新版 UniApp）
          const response = await new Promise((resolve, reject) => {
            uni.request({
              url: 'http://localhost:6007/sys-client/api/alipay/pay', // 后端接口地址
              method: 'GET',
              data: {
                userId: userInfo.value.userId, // 必传：用户ID
                totalAmount: selectedAmount.value.toFixed(2), // 金额保留2位小数
                subject: '账户充值', // 订单标题
                body: `UniApp H5充值-${userInfo.value.userId}`, // 订单描述（关联用户）
              },
              success: (res) => resolve(res),
              fail: (err) => reject(err)
            });
          });

          uni.hideLoading();

          // 处理接口响应
          if (response.statusCode === 200) {
            const payForm = response.data;
            console.log('支付宝沙箱表单数据:', payForm);

            // 判断运行环境：仅H5端渲染表单（小程序端不支持DOM操作）
            const systemInfo = uni.getSystemInfoSync();
            // 准确判断H5环境（避免把小程序的web-view误判为H5）
            const isH5 = systemInfo.platform === 'devtools' || systemInfo.env?.WEBVIEW === true || process.env.UNI_PLATFORM === 'h5';
            
            if (isH5) {
              // 显示表单容器
              showPayForm.value = true;
              // 等待DOM更新完成
              await nextTick();
              // 渲染并提交沙箱支付表单
              const formContainer = document.getElementById('alipayForm');
              if (formContainer && payForm) {
                formContainer.innerHTML = payForm;
                // 主动触发表单提交（防止沙箱脚本执行失败）
                setTimeout(() => {
                  const form = document.forms[0];
                  if (form) {
                    try {
                      form.submit();
                      console.log('表单提交成功，跳转至支付宝沙箱');
                    } catch (submitErr) {
                      console.error('表单提交失败:', submitErr);
                      uni.showToast({ title: '支付跳转失败', icon: 'none' });
                    }
                  } else {
                    console.error('未找到支付宝表单');
                    uni.showToast({ title: '支付表单加载失败', icon: 'none' });
                  }
                }, 100);
              } else {
                uni.showToast({ title: '表单容器不存在或支付表单为空', icon: 'none' });
              }
            } else {
              // 小程序端提示（需单独对接小程序支付，而非H5支付）
              uni.showToast({ title: '小程序端请使用支付宝小程序支付接口', icon: 'none' });
            }
          } else {
            uni.showToast({ title: `接口错误: ${response.statusCode}`, icon: 'none' });
          }
        } catch (err) {
          uni.hideLoading();
          console.error('充值流程失败:', err);
          uni.showToast({ title: '网络异常，请重试', icon: 'none' });
        }
      }
    },
  });
};

// 页面显示时：删除充值记录拉取逻辑（无需）
onShow(() => {
  console.log('页面显示');
});

// 页面加载时：检查登录状态
onLoad(() => {
  if (!userInfo.value.userId) {
    uni.showToast({ title: '请先登录', icon: 'none' });
    uni.navigateTo({ url: '/pages/login/login' });
  }
});
</script>

<style scoped>
/* 支付宝表单容器：H5端隐藏（仅用于渲染表单，不显示） */
.alipay-form-container {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 页面基础样式 */
.recharge-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

/* 已删除：余额模块相关样式 */

.amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.amount-item {
  width: calc(25% - 15rpx);
  background-color: #fff;
  border-radius: 8rpx;
  padding: 25rpx 0;
  text-align: center;
  font-size: 32rpx;
  border: 2rpx solid #eee;
}

.amount-item.selected {
  border-color: #007AFF;
  color: #007AFF;
  font-weight: bold;
  background-color: #f0f7ff;
}

.custom-amount {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 40rpx;
}

.custom-amount text {
  font-size: 30rpx;
  color: #333;
  width: 150rpx;
}

.custom-amount input {
  flex: 1;
  height: 100rpx;
  font-size: 30rpx;
  border: none;
}

.recharge-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 34rpx;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
}

/* 关键删除：充值记录相关样式 */

/* 已删除：.recharge-record、.record-title、.record-item等相关样式 */
</style>